<template>
  <div class="app-container">
    <el-card class="divHead">
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="库区编号"
              prop="code"
            >
              <el-input
                v-model="formData.code"
                placeholder="请输入"
                clearable
                disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="所属仓库"
              prop="warehouseId"
            >
              <el-select
                v-model="formData.warehouseId"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in warehouseData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="库区名称"
              prop="name"
            >
              <el-input
                v-model="formData.name"
                placeholder="请输入"
                maxlength="10"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="温度类型"
              prop="temperatureType"
            >
              <el-select
                v-model="formData.temperatureType"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in temperatureTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">

          <el-col :span="6">
            <el-form-item
              label="承重类型"
              prop="bearingType"
            >
              <el-select
                v-model="formData.bearingType"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in bearingTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="用途属性"
              prop="useType"
            >
              <el-select
                v-model="formData.useType"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in useTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="负责人"
              prop="personName"
            >
              <el-input
                v-model="formData.personName"
                placeholder="请输入"
                maxlength="10"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input
                v-model="formData.phone"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item
              label="库区状态"
              prop="status"
            >
              <el-radio-group v-model="formData.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="buttonBox">
          <el-button round class="unimportanceButton">返回</el-button>
          <el-button round class="minorImportantButton" @click="submit">提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { codeFactory, Addwarehouse, WarehouseList, Editwarehouse, Updatawarehouse } from '@/api/baseInfo/area'
import { temperatureTypeData, bearingTypeData, useTypeData } from '@/utils/transferTxt'
export default {
  data() {
    return {
      id: null,
      temperatureTypeData: temperatureTypeData,
      bearingTypeData: bearingTypeData,
      useTypeData: useTypeData,
      warehouseData: [], // 所属仓库下拉数据
      formData: {
        code: '',
        warehouseId: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        status: 1,
        personName: '',
        phone: ''
      },
      rules: {
        code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
        warehouseId: [
          { required: true, message: '请选择仓库类型', trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
        temperatureType: [
          { required: true, message: '请选择温度类型', trigger: 'change' }
        ],
        bearingType: [
          { required: true, message: '请选择承重类型', trigger: 'change' }
        ],
        useType: [{ required: true, message: '请选择用途类型', trigger: 'change' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      loading: false
    }
  },
  async created() {
    const { data } = await codeFactory()
    this.formData.code = data
    const { data: list } = await WarehouseList()
    this.warehouseData = list
    this.id = this.$route.params.id
    if (this.id !== 'null') {
      const { data: editList } = await Editwarehouse(this.id)
      this.formData = editList
    }
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate(async(isOk) => {
        if (!isOk) return
        this.loading = true
        if (this.id !== 'null') {
          await Updatawarehouse(this.formData)
        } else {
          await Addwarehouse(this.formData)
        }
        // 清空表单--
        this.$router.go(-1)
        this.$refs.ruleForm.resetFields()
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
.buttonBox {
  padding: 25px 0 0;
  margin: 0 -30px -5px;
  border-top: 1px solid #f5efee;
  text-align: center;
  .unimportanceButton {
    background: #f8f5f5;
    color: #332929;
    padding: 12px 52px;
  }
  .minorImportantButton {
    background: #ffb200;
    color: #332929;
    padding: 12px 52px;
  }
}
</style>
